[UI] Sort components alphabetically in flat widgets#3589
[UI] Sort components alphabetically in flat widgets#3589Sn0w3y wants to merge 5 commits intoOpenEMS:developfrom
Conversation
Import ArrayUtils and apply ArrayUtils.sortedAlphabetically to various component lists in production/consumption flat widgets (live and history). Chargers, meters, EVCSs and heat components are now sorted by alias for consistent ordering. No functional logic changes aside from deterministic ordering; changes affect ui/src/app/edge/*/flat/flat.ts files.
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## develop #3589 +/- ##
=============================================
- Coverage 58.59% 58.56% -0.03%
+ Complexity 105 104 -1
=============================================
Files 3091 3095 +4
Lines 134005 134207 +202
Branches 9882 9870 -12
=============================================
+ Hits 78508 78585 +77
- Misses 52590 52694 +104
- Partials 2907 2928 +21 🚀 New features to boost your workflow:
|
|
Wrapping everything in Should we consider rewriting /**
* Sort arrays alphabetically, according to the string returned by fn.
* Elements for which fn returns null or undefined are sorted to the end in an undefined order.
*
* @param array to sort
* @param fn to get a string to sort by
* @returns sorted array
*/
export function sortedAlphabetically<T>(array: T[], fn: (arg: T) => string): T[] {
return array.sort(alphabetically(fn));
}
/**
* Creates a comparator that sorts items alphabetically by a string key returned from `fn`.
*
* The comparator places falsy keys (null, undefined or empty string) after non-falsy keys;
* two falsy keys compare as equal.
*
* @param fn to get a string to sort by
* @returns A comparator `(a, b) => number` suitable for `Array.sort`.
*/
export function alphabetically<T>(fn: (arg: T) => string): (a: T, b: T) => number {
return (a: T, b: T) => {
const aVal = fn(a);
const bVal = fn(b);
if (!aVal) {
return !bVal ? 0 : 1;
} else if (!bVal) {
return -1;
}
return aVal.localeCompare(bVal, undefined, { sensitivity: "accent" });
}
}usage: .sort(ArrayUtils.alphabetically(a => a.alias));What do you think, @lukasrgr? |
Add ArrayUtils.alphabetically(fn) and add Tests for it aswell
|
@da-Kai you mean like this? :) |
Yes, and even with a test. 👌 |
|
I am forwarding this to UI/UX team, because this would change visualization for a lot of users. I think sorting by alias is feasible, but sitll need to check. |
sfeilmeier
left a comment
There was a problem hiding this comment.
Ok, hard to argue if both @lukasrgr and @da-Kai approve... but don't you think we should sort the Components as early as possible to make sure we stay consistent throughout the UI. I.e. directly in EdgeConfig (https://github.com/OpenEMS/openems/blob/develop/ui/src/app/shared/components/edge/edgeconfig.ts#L27)
This commit removes the sorting based on the component alias from various component lists across the application. Previously, components such as chargers, production meters, consumption meters, and EVCS components were sorted alphabetically by their alias before being processed or displayed. This sorting logic has been removed to streamline the data processing and potentially improve performance. The decision to remove sorting is based on the premise that the order of components does not impact the functionality or the user interface experience. Additionally, sorting is now centralized in the EdgeConfig class, ensuring a consistent approach across the application and reducing redundancy.
You are 100% right in thsi ! |
Import ArrayUtils and apply ArrayUtils.sortedAlphabetically to various component lists in production/consumption flat widgets (live and history). Chargers, meters, EVCSs and heat components are now sorted by alias for consistent ordering. No functional logic changes aside from deterministic ordering; changes affect ui/src/app/edge/*/flat/flat.ts files.
Should fix: #3386